import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

class UserData extends StatefulWidget {
  @override
  _UserDataState createState() => _UserDataState();
}

class _UserDataState extends State<UserData> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('数据视图'),
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '模型使用',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 16),
              Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                elevation: 5,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: SizedBox(
                    height: 200,
                    child: Row(
                      children: [
                        Expanded(child: PieChartSample()),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            LegendItem(color: Colors.blue, text: '通义千问'),
                            LegendItem(color: Colors.orange, text: '智谱清言'),
                            LegendItem(color: Colors.green, text: '多模型'),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              SizedBox(height: 16),
              Text(
                '访问次数',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 16),
              Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                elevation: 5,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: SizedBox(
                    height: 200,
                    child: BarChartSample(),
                  ),
                ),
              ),
              SizedBox(height: 16),
              Text(
                '充值数据',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 16),
              Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                elevation: 5,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: SizedBox(
                    height: 200,
                    child: LineChartSample(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}


// 折线图
class LineChartSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LineChart(
      LineChartData(
        borderData: FlBorderData(show: false),
        // 数据
        lineBarsData: [
          LineChartBarData(
            spots: [
              FlSpot(1, 150), // 二月
              FlSpot(2, 80),  // 三月
              FlSpot(3, 200), // 四月
              FlSpot(5, 50),  // 六月
              FlSpot(6, 120), // 七月
              FlSpot(7, 60),  // 八月
              FlSpot(8, 120), // 九月
              FlSpot(9, 200), // 十月
              FlSpot(10, 160), // 十一月
              FlSpot(11, 160), // 十二月
              FlSpot(12, 120), // 十二月
            ],
            isCurved: true,
            barWidth: 2,
            color: Colors.blue,
            isStrokeCapRound: true,
            dotData: FlDotData(show: true),
            belowBarData: BarAreaData(show: true),
          ),
        ],
        // 坐标
        titlesData: FlTitlesData(
          leftTitles: AxisTitles(
            // axisNameSize: 32,
            sideTitles: SideTitles(
              showTitles: true,
              reservedSize: 30,
              getTitlesWidget: (value, meta) {
                // 对于Y轴，只在末端显示单位
                return Text('${value}元', style: TextStyle(color: Colors.black, fontSize: 10));
              },
            ),
          ),
          bottomTitles: AxisTitles(
            sideTitles: SideTitles(
              showTitles: true,
              getTitlesWidget: (value, meta) {
                return Text('${value}月', style: TextStyle(color: Colors.black, fontSize: 10));
              },
              interval: 1,
              reservedSize: 30,
            ),
          ),
          topTitles: AxisTitles(
            sideTitles: SideTitles(showTitles: false),
          ),
          rightTitles: AxisTitles(
            sideTitles: SideTitles(showTitles: false),
          ),
        ),
      ),
    );
  }
}

// 饼状图
class PieChartSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PieChart(
      PieChartData(
        sections: [
          PieChartSectionData(
            color: Colors.blue,
            value: 33,
            title: '33%',
            radius: 50,
            titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
          ),
          PieChartSectionData(
            color: Colors.orange,
            value: 24,
            title: '23%',
            radius: 50,
            titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
          ),
          PieChartSectionData(
            color: Colors.green,
            value: 43,
            title: '43%',
            radius: 50,
            titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
          ),
        ],
        borderData: FlBorderData(show: false),
        sectionsSpace: 2,
        centerSpaceRadius: 40,
      ),
    );
  }
}

// 直方图
class BarChartSample extends StatelessWidget {
  final List<String> weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
  @override
  Widget build(BuildContext context) {
    return BarChart(
      BarChartData(
        barGroups: [
          BarChartGroupData(
            x: 1,
            barRods: [
              BarChartRodData(toY: 5, color: Colors.blue, width: 30, borderRadius: BorderRadius.zero),
            ],
          ),
          BarChartGroupData(
            x: 2,
            barRods: [
              BarChartRodData(toY: 7, color: Colors.blue, width: 30, borderRadius: BorderRadius.zero),
            ],
          ),
          BarChartGroupData(
            x: 3,
            barRods: [
              BarChartRodData(toY: 8, color: Colors.blue, width: 30, borderRadius: BorderRadius.zero),
            ],
          ),
          BarChartGroupData(
            x: 4,
            barRods: [
              BarChartRodData(toY: 13, color: Colors.blue, width: 30, borderRadius: BorderRadius.zero),
            ],
          ),
          BarChartGroupData(
            x: 5,
            barRods: [
              BarChartRodData(toY: 11, color: Colors.blue, width: 30, borderRadius: BorderRadius.zero),
            ],
          ),
          BarChartGroupData(
            x: 6,
            barRods: [
              BarChartRodData(toY: 24, color: Colors.blue, width: 30, borderRadius: BorderRadius.zero),
            ],
          ),
          BarChartGroupData(
            x: 7,
            barRods: [
              BarChartRodData(toY: 22, color: Colors.blue, width: 30, borderRadius: BorderRadius.zero),
            ],
          ),
        ],
        borderData: FlBorderData(show: false),
        titlesData: FlTitlesData(
          leftTitles: AxisTitles(
            sideTitles: SideTitles(
              showTitles: true,
              getTitlesWidget: (value, meta) {
                return Text('${value}次', style: TextStyle(color: Colors.black, fontSize: 10));
              },
              interval: 5,
              reservedSize: 30,
            ),
          ),
          bottomTitles: AxisTitles(
            sideTitles: SideTitles(
              showTitles: true,
              getTitlesWidget: (value, meta) {
                // 确保value在有效范围内
                if (value >= 1 && value <= weekDays.length) {
                  return Text(weekDays[value.toInt() - 1], style: TextStyle(color: Colors.black, fontSize: 10));
                }
                // 如果value不在有效范围内，可以返回一个空的SizedBox
                return SizedBox.shrink();
              },
              interval: 1,
              reservedSize: 30,
            ),
          ),
          topTitles: AxisTitles(
            sideTitles: SideTitles(showTitles: false),
          ),
          rightTitles: AxisTitles(
            sideTitles: SideTitles(showTitles: false),
          ),
        ),
      ),
    );
  }
}

class LegendItem extends StatelessWidget {
  final Color color;
  final String text;

  LegendItem({required this.color, required this.text});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4.0),
      child: Row(
        children: [
          Container(
            width: 16,
            height: 16,
            color: color,
          ),
          SizedBox(width: 8),
          Text(text),
        ],
      ),
    );
  }
}
